<template>
	<div class="bg-white">
		<el-tabs v-model="activeCode" @tab-click="handleClick" class="tabs">
			<el-tab-pane label="全部" name="-1"></el-tab-pane>
			<el-tab-pane label="待接单" name="0"></el-tab-pane>
			<el-tab-pane label="已接单" name="1"></el-tab-pane>
			<el-tab-pane label="已完成" name="2"></el-tab-pane>
			<el-tab-pane label="已取消" name="3"></el-tab-pane>
		</el-tabs>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
			<div class="form-search">
				<el-form-item label="订单编号" prop="microblogOrderNo">
					<el-input v-model="ruleForm.microblogOrderNo" placeholder="请输入订单编号"></el-input>
				</el-form-item>
				<el-form-item label="活动名称" prop="microblogOrderActivityRemark">
					<el-input v-model="ruleForm.microblogOrderActivityRemark" placeholder="请输入活动名称"></el-input>
				</el-form-item>
			</div>
			<div class="form-search">
				<el-form-item label="资源名称" prop="resourceName">
					<el-input v-model="ruleForm.resourceName" placeholder="请输入资源名称"></el-input>
				</el-form-item>
				<el-form-item label="活动时间">
					<el-date-picker v-model="dateTime" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="~"
					 placeholder="请输入选择日期时间"></el-date-picker>
				</el-form-item>
				<!-- submitForm('ruleForm') -->

				<el-button type="primary" @click="handleSearch()" class="search-btn">搜索</el-button>
			</div>
		</el-form>
		<div class="export-btn">
			<el-button type="primary" @click="exportAll('ruleForm')">{{activeName}}导出</el-button>
		</div>
		<div class="mar-20">
			<el-table :data="tableData" border style="width: 100%" :header-cell-style="{
						'background-color': '#f2f2f2',
						'font-size': '16px',
						'font-weight': 'bold',
						'color' : '#66667d'
					}">
				<el-table-column prop="microblogOrderNo" label="订单号" width="150">
				</el-table-column>
				<el-table-column prop="microblogOrderArticleTitle" label="文章标题" width="120">
				</el-table-column>
				<el-table-column label="资源名称" width="120">
					<template slot-scope="scope">
						<el-tag type='danger' @click="handleGoto(scope.row.resourceName)" close-transition>{{scope.row.resourceName}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="稿件预览" width="120">
					<template slot-scope="scope">
						<el-tag type='warning' @click="handleGoto(scope.row.microblogOrderManuscript)" close-transition>稿件预览</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="稿件下载" width="150">
					<template slot-scope="scope">
						<el-tag type='primary' @click="handleGoto(scope.row.microblogOrderManuscriptDownloadLink)" v-if="scope.row.advertorialOrderManuscriptDownloadLink != null" close-transition>下载稿件</el-tag>
					</template>
				</el-table-column>

				<el-table-column label="完成链接" width="150">
					<template slot-scope="scope">
						{{scope.row.microblogOrderAccomplishLink}}
					</template>
				</el-table-column>

				<el-table-column label="支付金额" width="120">
					<template slot-scope="scope">
						{{scope.row.microblogOrderPrice}} 元
					</template>
				</el-table-column>

				<el-table-column label="执行状态" width="150">
					<template slot-scope="scope">
						<el-tag :type="scope.row.microblogOrderExecutionStatusStr === '已取消' ? 'danger' : 'success'" close-transition>{{scope.row.microblogOrderExecutionStatusStr}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="下单时间" width="180">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button v-if="scope.row.microblogOrderExecutionStatus != 6 " size="mini" type="success" @click="handleDetail(scope.$index, scope.row.microblogOrderExecutionStatus)">详情</el-button>

						<el-button v-if="scope.row.microblogOrderExecutionStatus == 6" size="mini" type="success" @click="handlePay(scope.$index, scope.row)">支付</el-button>
						<!-- das -->
						<el-dialog title="提示" :visible.sync="dialogFormVisibleA">
							<div>支付接口尚未提供</div>
							<div slot="footer" class="dialog-footer">
								<el-button @click="dialogFormVisibleA = false">取 消</el-button>
								<el-button type="warning" @click="dialogFormVisibleA== false">确 定</el-button>
							</div>
						</el-dialog>
						<!-- asda -->
						<el-button v-if="scope.row.microblogOrderExecutionStatus == 6" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="ruleForm.page"
			 :page-sizes="[30,50]" layout="prev, pager, next, jumper,total, sizes" :total="totalCount">
			</el-pagination>
			<el-dialog title="订单信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
				<el-steps :active="active" finish-status="success">
					<el-step title="用户下单"></el-step>
					<el-step title="待接单"></el-step>
					<el-step title="已接单"></el-step>
					<el-step title="已完成"></el-step>
					<el-step title="已取消"></el-step>
				</el-steps>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		created() {
			this.handleSearch();
		},
		watch: {
			dateTime(newVal) {
				this.ruleForm.startTime = newVal[0];
				this.ruleForm.endTime = newVal[1];
			}
		},
		data() {
			return {
				dialogFormVisibleA: false,
				dialogVisible: false,
				active: 3, // 详请步骤条
				activeName: "全部", //选项卡名称
				activeCode: '-1', //选项卡
				currentPage: 1, //分页插件
				totalCount: 120, //查询后的总条数
				totalPage: 10,
				dateTime: '', //开始结束
				ruleForm: {
					type: 3,
					microblogOrderExecutionStatus: -1,
					microblogOrderNo: '',
					microblogOrderActivityRemark: '',
					resourceName: '',
					startTime: '',
					endTime: '',
					page: 1,
					size: 120

				},
				tableData: [],
				// 验证规则
				rules: {
					// orderNum: [
					// 	{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
					// ],
					// microblogOrderActivityRemark: [
					// 	{ required: false, message: '请选择活动名称', trigger: 'change' }
					// ],
					// type: [
					// 	{ type: 'array', required: false, message: '请至少选择一个活动性质', trigger: 'change' }
					// ],
					// resource: [
					// { required: false, message: '请选择活动资源', trigger: 'change' }
					// ],
					// desc: [
					// 	{ required: false, message: '请填写活动形式', trigger: 'blur' }
					// ]
				}
			};
		},
		methods: {
			handleClick(tab) {
				let index = tab.index;
				//console.log(tab.index);
				if (index == '0') {
					this.activeName = "全部";
				} else if (index == '1') {
					this.activeName = "待接单";
				} else if (index == '2') {
					this.activeName = "已接单";
				} else if (index == '3') {
					this.activeName = "已完成";
				} else {
					this.activeName = "已取消";
				}

				this.ruleForm.microblogOrderExecutionStatus = index - 1;
				this.handleSearch();
			},

			handleSearch() {
				this.$api.advertorialOrder.findByPage(this.ruleForm).then(res => {
					//console.log(res.data);
					this.tableData = res.data.data;
					this.totalCount = res.data.totalCount;
					this.totalPage = res.data.totalPage;
				});
			},

			handleGoto(url) {
				//console.log(url);
				this.$router.push(url);
			},
			handleSizeChange(val) {
				this.ruleForm.size = val;
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.ruleForm.page = val;
			},
			exportAll() {
				this.$api.advertorialOrder.download({
					type: '3'
				}).then(res => {
					if (!res.data) {
						return;
					}
					let blob = new Blob([res.data], {
						type: "application/vnd.ms-excel"
					});
					let url = window.URL.createObjectURL(blob);
					window.location.href = url;
				});
			},

			handleDetail(b, status) {
				// this.$alert("", '订单详情',{dangerouslyUseHTMLString: true});
				this.dialogVisible = true;
				this.active = status + 1;
				//console.log(status);
			},
			handleClose() {
				this.dialogVisible = false;
			},
			handlePay(){
				this.dialogFormVisibleA = true;
			}
		}
	}
</script>

<style>
	.header-2 {
		height: 200px;
	}

	.bg-white {
		background-color: white;
	}

	.form-search {
		display: flex;
		flex-direction: row;
	}


	.el-tabs__nav-wrap::after {

		background-color: #fff !important;
	}

	.el-date-editor.el-input {
		width: 201px !important;
	}

	.tabs {
		padding-left: 15px;
	}

	.search-btn,
	.export-btn {
		width: 77px;
		height: 40px;
		margin-left: 25px;
	}

	.el-tabs__item {
		font-size: 18px !important;
	}

	.el-date-editor--daterange.el-input__inner {
		width: 226px !important;
	}

	.mar-20 {
		margin: 20px;
	}
</style>
